<template>
  <div>
    <CityHeader></CityHeader>
    <CitySearch></CitySearch>
    <CityList :letter='letter'></CityList>
    <CityAlphabet @change="handleLetterChange"></CityAlphabet>
  </div>
</template>

<script>
import CityHeader from "./components/cityHeader";
import CitySearch from "./components/search";
import CityList from "./components/cityList";
import CityAlphabet from "./components/Alphabet";
export default {
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data() {
    return {
      letter:'',
    };
  },
  methods: {
    handleLetterChange(letter) {
      console.log(letter);
      this.letter = letter;
    }
  }
};
</script>
<style lang="stylus" scoped></style>
